<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- initial-scale=1.0是确保页面1:1展现，不会出现缩放 -->
    <!-- user-scalable=no在移动端禁止浏览器缩放，和maximum-scale=1.0一起使用 -->
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/cart.css">
    <title>Document</title>
</head>

<body>
    <div class="root">
        <div class="topbar">
            <img src="../images/icon/elf_39.png" alt="">
            购物车
        </div>
        <ul class="cart">
            <li>
                <img src="../images/icon/elf_17.png" alt="" class="delete">
                <img src="../images/icon/elf_19.png" alt="" class="checkbox">
                <img src="../images/Cart/1_03.jpg" alt="" class="cart_img">
                <div class="info">
                    <div class="text">
                        <div class="title">丛林物语双面印花磨毛四件套</div>
                        <div class="size">1.8mi</div>
                    </div>
                    <div class="number">
                        <div class="money">￥<span>399.00</span></div>
                        <div class="option">
                            <span class="minus">-</span>
                            <span class="main">1</span>
                            <span class="add">+</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../images/icon/elf_17.png" alt="" class="delete">
                <img src="../images/icon/elf_19.png" alt="" class="checkbox">
                <img src="../images/Cart/1_03.jpg" alt="" class="cart_img">
                <div class="info">
                    <div class="text">
                        <div class="title">丛林物语双面印花磨毛四件套</div>
                        <div class="size">1.8mi</div>
                    </div>
                    <div class="number">
                        <div class="money">￥<span>399.00</span></div>
                        <div class="option">
                            <span class="minus">-</span>
                            <span class="main">1</span>
                            <span class="add">+</span>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../images/icon/elf_17.png" alt="" class="delete">
                <img src="../images/icon/elf_14.png" alt="" class="checkbox">
                <img src="../images/Cart/1_03.jpg" alt="" class="cart_img">
                <div class="info">
                    <div class="text">
                        <div class="title">丛林物语双面印花磨毛四件套</div>
                        <div class="size">1.8mi</div>
                    </div>
                    <div class="number">
                        <div class="money">￥<span>399.00</span></div>
                        <div class="option">
                            <span class="minus">-</span>
                            <span class="main">1</span>
                            <span class="add">+</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="like">
            <div class="bannerbar">猜你喜欢</div>
            <ul class="content">
                <li class="product">
                    <a href="#">
                        <img src="../images/Cart/1_15.jpg" alt="">
                        <div class="text">
                            <div class="title">璀璨灵动 项链</div>
                            <div class="money">￥<span class="number">149</span></div>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="#">
                        <img src="../images/Cart/1_15.jpg" alt="">
                        <div class="text">
                            <div class="title">璀璨灵动 项链</div>
                            <div class="money">￥<span class="number">149</span></div>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="#">
                        <img src="../images/Cart/1_15.jpg" alt="">
                        <div class="text">
                            <div class="title">璀璨灵动 项链</div>
                            <div class="money">￥<span class="number">149</span></div>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="#">
                        <img src="../images/Cart/1_15.jpg" alt="">
                        <div class="text">
                            <div class="title">璀璨灵动 项链</div>
                            <div class="money">￥<span class="number">149</span></div>
                        </div>
                    </a>
                </li>
                <li class="product">
                    <a href="#">
                        <img src="../images/Cart/1_15.jpg" alt="">
                        <div class="text">
                            <div class="title">璀璨灵动 项链</div>
                            <div class="money">￥<span class="number">149</span></div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div class="all">
                <img src="../images/icon/elf_19.png" alt="" class="allcheck">
                <span class="textall">全选</span>
                <span class="money">￥<span>9.00</span></span>
                <span class="button active">下单</span>
            </div>
            <ul class="footerbar">
                <li>
                    <a href="#">
                        <img src="../images/icon/elf_06.png" alt="">
                        <div class="title">首页</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../images/icon/elf_22.png" alt="">
                        <div class="title">优选</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../images/icon/elf_25.png" alt="">
                        <div class="title">分类</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../images/icon/elf_41.png" alt="">
                        <div class="title">购物车</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../images/icon/elf_43.png" alt="">
                        <div class="title">我的</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="goup">
            <img src="../images/icon/elf_61.png" alt="">
        </div>
    </div>
</body>

</html>